<template>
	<text class="iconfont icon-xiangzuojiantou"></text>
	<view class="header">
		<text>订单详情</text>
	</view>
	<view class="content">
		<view class="my-order">
			<view class="title">
				<text style="margin-right: 10rpx;">我的订单：{{order.order.area}}</text>
				<!-- <text>12号桌</text> -->
			</view>
			<view class="order-time">
				<view class="time-remaining">
					<text>订单剩余{{reTimeFn(order.order.endTime)}}</text>
					<text class="active">我要加时</text>
				</view>
				<view class="time">
					<text>开始时间：{{timeFn(order.order.startTime)}}</text>
					<text>结束时间：{{timeFn(order.order.endTime)}}</text>
					<text>下单时间：{{timeFn(order.order.createTime)}}</text>
				</view>
			</view>
		</view>
		<view class="order-authority">
			<view class="title">订单权限</view>
			<view class="operation">
				<view class="store-gate">
					<text>门店大门</text>
					<button class="active">打卡开门</button>
				</view>
				<view class="inner-door">
					<text>包间内门</text>
					<button class="active">开门</button>
				</view>
				<view class="lighting">
					<text>室内灯光</text>
					<view>
						<button @click="lighting=1" :class="[lighting==1?'active':'']">1级</button>
						<button @click="lighting=2" :class="[lighting==2?'active':'']">2级</button>
						<button @click="lighting=3" :class="[lighting==3?'active':'']">3级</button>
						<button @click="lighting=4" :class="[lighting==4?'active':'']">4级</button>
						<button @click="lighting=5" :class="[lighting==5?'active':'']">5级</button>
					</view>
				</view>
				<view class="air-conditioner">
					<text>空调设置</text>
					<view>
						<view>
							<button @click="airConditioner=true" :class="[airConditioner?'active':'']">开</button>
							<button @click="airConditioner=false" :class="[airConditioner?'':'active']">关</button>
						</view>
						<view>
							<button class="active">-</button>
							<button class="active">+</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="reminder">
			<view class="title">温馨提示</view>
			<view class="tips">
				<text>1、预约时间段内，您可以进行打卡学习，打卡后您的座位灯光会保持开启，可以通过电源开关进行关闭</text>
				<text>2、预约时间结束后，灯光会自动熄灭，为了不影响下一位朋友使用，请您及时收拾物品离席。</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,onMounted, reactive} from 'vue' 
	import store from '../../store/index.js'
	let order=reactive({order:{}});
	let lighting=ref(1);
	let airConditioner=ref(true);
	onMounted(()=>{
		console.dir(JSON.parse(JSON.stringify(store.state.order)))
		order.order=JSON.parse(JSON.stringify(store.state.order))
	})
	let timeFn=function(time){
		return time+'（'+'周'+'日一二三四五六'.charAt(new Date(time).getDay())+'）'
	};
	let dateFn=function(date){
		if(date<0){
			date=-date
		}
		return date<10?'0'+date:date
	}
	let reTimeFn=function(time){
		let oDate=new Date(time).getTime()-new Date().getTime();
		// console.log(oDate);
		return dateFn(parseInt(oDate/60/60/1000))+':'+dateFn(parseInt(oDate%3600000/60000))+':'+dateFn(parseInt(oDate%60000/1000))
	}
</script>

<style lang="less" scoped>
	@import url("../../static/fonts/iconfont.css");
	.icon-xiangzuojiantou{
		font-size: 32rpx;
		font-weight: bolder;
		position: fixed;
		top: 24rpx;
		left: 30rpx;
	}
	.header{
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		border-bottom: 1px solid #eee;
	}
	.content{
		padding: 0 40rpx 40rpx 40rpx;
		& .my-order{
			margin-top: 32rpx;
			& .title{
				font-size: 28rpx;
				font-weight: bolder;
				padding: 20rpx 0;
			}
			& .order-time{
				height: 310rpx;
				background: #f7efe5;
				border-radius: 10rpx;
				padding-top: 16rpx;
				& .time-remaining{
					height: 76rpx;
					padding-left: 20rpx;
					padding-right: 46rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #c6964f;
					& .active{
						color: #c6964f;
					}
				}
				& .time{
					height: 142rpx;
					padding: 42rpx 0 0 20rpx;
					font-size: 28rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
			}
		}
		& .order-authority{
			margin-top: 22rpx;
			& .title{
				font-size: 28rpx;
				font-weight: bolder;
				padding: 20rpx 0;
			}
			& .operation{
				height: 420rpx;
				padding: 0 38rpx 0 32rpx;
				background: #f2f2f2;
				font-size: 28rpx;
				border-radius: 10rpx;
				& .active{
					background: #c4924a;
				}
				& button{
					height: 50rpx;
					line-height: 50rpx;
					padding: 0;
					margin: 0;
					font-size: 28rpx;
					background: #d7d7d7;
					color: #fff;
					border-radius: 25rpx;
				}
				& .store-gate{
					height: 103rpx;
					border-bottom: 1px solid #aaa;
					display: flex;
					justify-content: space-between;
					align-items: center;
					& button{
						width: 150rpx;
					}
				}
				& .inner-door{
					height: 103rpx;
					border-bottom: 1px solid #aaa;
					display: flex;
					justify-content: space-between;
					align-items: center;
					& button{
						width: 150rpx;
					}
				}
				& .lighting{
					height: 103rpx;
					border-bottom: 1px solid #aaa;
					display: flex;
					justify-content: space-between;
					align-items: center;
					& view{
						display: flex;
						& button{
							width: 84rpx;
							margin-left: 10rpx;
						}
					}
				}
				& .air-conditioner{
					height: 105rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					&>view{
						width: 470rpx;
						display: flex;
						justify-content: space-between;
						& view{
							display: flex;
							& button{
								width: 84rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
		}
		& .reminder{
			margin-top: 22rpx;
			& .title{
				font-size: 28rpx;
				font-weight: bolder;
				padding: 20rpx 0;
			}
			& .tips{
				height: 300rpx;
				padding: 42rpx 50rpx 0 28rpx;
				background-color: #f2f2f2;
				font-size: 24rpx;
				font-weight: lighter;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				& text{
					line-height: 60rpx;
				}
			}
		}
	}
</style>
